<script setup lang="ts">
defineOptions({
  name: "GAS_OPERATION_BOTTLEMANAGE_REPLACEBOTTLE"
});

import { ref, markRaw, provide, onActivated } from "vue";
import { useRoute } from "vue-router";
import switchTabs from "@/views/common/components/switchTabs/index.vue";
import allOrders from "./components/allOrders.vue";
import myOrders from "./components/myOrders.vue";
import supplyReminder from "./components/supplyReminder.vue";
import orderReport from "./components/orderReport.vue";
import { type OptionsType } from "@/components/ReSegmented";

const route = useRoute();

const options: Array<OptionsType> = [
  {
    label: "工单总览",
    name: "allOrders",
    com: markRaw(allOrders)
  },
  {
    label: "我的工单",
    name: "myOrders",
    com: markRaw(myOrders)
  },
  {
    label: "一键开单",
    name: "supplyReminder",
    com: markRaw(supplyReminder)
  },
  {
    label: "工单报表",
    name: "orderReport",
    com: markRaw(orderReport)
  }
];

const activeTab = ref<string>("");
const activeFlag = ref<boolean>(false);

provide("activeTab", activeTab);
provide("activeFlag", activeFlag);

const init = () => {
  const {
    query: { tab = "allOrders" }
  } = route;
  activeTab.value = tab as string;
};

init();

onActivated(() => {
  if (!activeFlag.value) {
    activeFlag.value = true;
  }
});
</script>

<template>
  <switchTabs v-model="activeTab" :options="options" />
</template>
